<template>
  <div id="detail">
    <div class="detail-header">
      <span class="help-detail" v-if="activeIndex===0">
        <i class="iconfont">&#xe654;</i>
        如何得更多ONEBET
      </span>
      <span class="instructions" v-if="activeIndex===1">
        分红规则：ONEBET持有量/ONEBET流通量 *平台盈利总额* 分红比例
      </span>
    </div>
    <div class="detail-tabs">
      <ul class="detail-tabs-header" v-if="currencyType&&currencyType.length>0">
        <!--<li :style="{'width':100/currencyType.length+'%'}" v-for="(list,index) in currencyType" :key="index"-->
        <!--:class="activeIndex===list.id?'active':''" @click="checkIndex(list.id)">{{list.name}}-->
        <!--</li>-->
        <li @click="checkIndex(0)" :class="activeIndex===0?'active':''">ONEBET</li>
        <li @click="checkIndex(1)" :class="activeIndex===1?'active':''">ETH</li>
        <li @click="checkIndex(2)" :class="activeIndex===2?'active':''">BTC</li>
        <li @click="checkIndex(3)" :class="activeIndex===3?'active':''">EOS</li>
      </ul>
      <div class="detail-tabs-cont">
        <ul>
          <li v-if="detailsData&&detailsData.value.length>0" v-for="(item,index) in detailsData.value" :key="index">
            <span>{{item.description}}</span>
            <span>{{item.coinName}}</span>
            <span>{{item.time}}</span>
            <span>{{item.operate}}{{item.amount}}</span>
          </li>
          <p class="none-data" v-if="!detailsData||detailsData.value.length<1">暂无数据</p>
          <!--<li v-if="activeIndex===1" v-for="(item,index) in 10" :key="index" :class="index%2?'active':''">-->
          <!--<span>充值</span>-->
          <!--<span>BET</span>-->
          <!--<span>2018-11-05 23:00:01</span>-->
          <!--<span>+50</span>-->
          <!--</li>-->
        </ul>
        <div class="notice-page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="detailsData.pageNum"
            :page-size="detailsData.pageSize"
            :total="detailsData.totalCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Api from '@/axios/api/api'

  export default {
    name: 'detail',
    data() {
      return {
        activeIndex: 0,
        currencyType: [
          {
            'id': 1,
            'name': 'ONEBET'
          },
          {
            'id': 2,
            'name': 'ETH'
          },
          {
            'id': 3,
            'name': 'BTC'
          },
          {
            'id': 4,
            'name': 'EOS'
          }
        ],
        currentId: 1,
        currentName: 'ONEBET',
        detailsData: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        }
      }
    },
    methods: {
      getCurrency() {
        Api.getCurrencytype().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.currencyType = []
            this.currencyType = result.data
            this.currentId = result.data[0].id
            this.getDetailsdata()
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getDetailsdata() {
        let params = {
          pageSize: this.detailsData.pageSize,
          pageNum: this.detailsData.pageNum,
          coinType: this.currentId
        }
        Api.getFlow(params).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.detailsData.totalCount = result.data.totalCount
            this.detailsData.value = result.data.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      checkIndex(index) {
        this.activeIndex = index
        this.currentId = this.currencyType[index].id
        this.getDetailsdata()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(pageNumber) {
        this.detailsData.pageNum = pageNumber
        this.getDetailsdata()
      }
    },
    mounted() {
      // this.getCurrency()
      this.getDetailsdata()
    }
  }
</script>

<style lang="less" scoped>
  #detail {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    .detail-header {
      width: 100%;
      height: 50px;
      display: block;
      overflow: hidden;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      > span {
        width: 100%;
        height: auto;
        line-height: 50px;
        display: block;
        overflow: hidden;
        font-size: 16px;
        padding: 0 10px;
        box-sizing: border-box;
      }
      .instructions {
        color: #000000;
        text-align: center;
      }
      .help-detail {
        text-align: right;
        color: #7B52F8;
        vertical-align: mathematical;
        > i {
          font-size: 24px;
          vertical-align: middle;
        }
      }
    }
    .detail-tabs {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      .detail-tabs-header {
        width: 100%;
        height: 76px;
        display: block;
        overflow: hidden;
        > li {
          width: 25%;
          height: 76px;
          line-height: 76px;
          float: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #000000;
          text-align: center;
          background: #E2E2E2;
          cursor: pointer;
          &:first-child {
            padding-left: 38px;
            box-sizing: border-box;
          }
          &:last-child {
            padding-right: 38px;
            box-sizing: border-box;
          }
        }
        > .active {
          background: #8638FD;
          color: #ffffff;
        }
      }
      .detail-tabs-cont {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        padding-bottom: 20px;
        > ul {
          width: 100%;
          height: auto;
          display: block;
          overflow: hidden;
          padding: 0 38px;
          padding-bottom: 60px;
          box-sizing: border-box;
          > li {
            width: 100%;
            height: 64px;
            line-height: 64px;
            display: block;
            overflow: hidden;
            border-bottom: 1px solid #D8D8D8;
            > span {
              width: 25%;
              height: 64px;
              line-height: 64px;
              float: left;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #000000;
              text-align: center;
            }
          }
          > .active {
            > span {
              color: #8638FD;
            }

          }
        }
      }
    }
  }

  .none-data {
    padding-top: 20px;
  }
</style>
